<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <link rel="stylesheet" href="css/game_hall.css">
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="layui-row">
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1">
            <div><img src="image/博弈.png" alt="">五子棋对战</div>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo">
            <a href="login.html">
                <img src="image/logout.png" alt="">退出登录
            </a>
        </div>
    </div>
</div>


<div class="container">
   <div>
       <!-- 用户信息   -->
       <div id="screen">

       </div>
       <!--  匹配按钮  -->
       <div id="match-button">开始匹配</div>
   </div>
</div>

<script src="js/jquery.js"></script>
<script>
    <!--  获取登陆用户的的信息  -->
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success: function (body) {
            let screen = document.querySelector('#screen');
            screen.innerHTML = '玩家: '+ body.username + ' 分数: '+ body.score + "<br>" +
                "比赛场次: " +body.totalCount + " 获胜场次: "+body.winCount;
        },
        error: function () {
            console.log("获取用户信息失败!");
        }
    });
    // 匹配逻辑
    let url = 'ws://'+location.host+'/findMatch';
    let websocket = new WebSocket(url);
    websocket.onopen = function () {
        console.log("onopen");
    }
    websocket.onclose = function () {
        console.log("onclose");
    }
    websocket.onerror = function () {
        console.log("onerror");
    }
    // 监听页面关闭事件,在页面关闭之前手动调用 websocket 的close方法
    window.onbeforeunload = function () {
        websocket.close();
    }
    websocket.onmessage = function (e) {
        // 处理服务器返回的结果 (开始匹配&停止匹配&匹配中)
        // JSON.parse -> 转成js对象
        let resp = JSON.parse(e.data);
        if (!resp.ok){
            console.log("游戏大厅收到了一个失败响应! " + resp.reason);
            location.assign('/login.html');
            return;
        }
        if (resp.message === 'startMatch'){
            console.log('进入匹配队列!');
            matchBtu.innerHTML = '匹配中..(点击停止匹配)';
        }else if (resp.message === 'stopMatch'){
            console.log('离开匹配队列!');
            matchBtu.innerHTML = '开始匹配';
        }else if (resp.message === 'matchSuccess'){
            console.log('匹配到对手,进入游戏房间!');
            location.replace('/game_room.html');
        }else if (resp.message === 'repeatConnection'){
            alert("当前检测到多开,请使用其它账号登陆!");
            location.assign('/login.html');
        }else{
            console.log('受到了非法响应! message: '+ resp.message);
        }
    }

    let matchBtu = document.querySelector('#match-button');
    matchBtu.onclick = function () {
        // 先确认 websocket 的连接状态
        if (websocket.readyState === websocket.OPEN){
            // 连接没问题时
            if (matchBtu.innerHTML === '开始匹配'){
                console.log('开始匹配');
                // JSON.stringify -> 转成json格式数据
                websocket.send(JSON.stringify({
                    message: 'startMatch',
                }));
            }else if (matchBtu.innerHTML === '匹配中..(点击停止匹配)'){
                console.log('停止匹配');
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));
            }
        }else{
            // 连接断开
            alert('当前连接已断开!请重新登录!');
            location.assign('/login.html');
        }
    }


</script>
</body>
</html>